<template>
    <el-table-column :prop="column.prop" :label="column.label" :key="index"
                     :type="column.type" :align="column.align" :header-align="column.headerAlign" :width="column.width"
                     :resizable="column.resizable" :class-name="column.className"
                     :show-overflow-tooltip="column.tooltip===undefined?true:column.tooltip"
                     :render-header="column.renderHeader" :min-width="column.minWidth"
                     :fixed="column.fixed" :filters="column.filters" :filter-method="column.filterMethod"
                     :label-class-name="column.labelClassName">
        <template slot-scope="scope">
            <template v-if="!column.render">
                <column-item :column.sync="column" :scope.sync="scope" :edit.sync="edit" :index.sync="index" />
            </template>
            <template v-else>
                <expand-dom :column="column" :row="scope.row" :render="column.render"
                            :index="index"></expand-dom>
            </template>
        </template>
    </el-table-column>
</template>

<script>
import ColumnItem from "../common/ColumnItem";
    export default {
        name: "TableColumn",
        components: {
            ColumnItem,
            expandDom: {
                functional: true,
                props: {
                    row: Object,
                    render: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null,
                    }
                },
                render: (h, ctx) => {
                    const params = {
                        row: ctx.props.row,
                        index: ctx.props.index,
                    };
                    if (ctx.props.column) {
                        params.column = ctx.props.column;
                    }
                    return ctx.props.render(h, params);
                },
            },
            expandHeader: {
                functional: true,
                props: {
                    row: Object,
                    headerRender: Function,
                    index: Number,
                    column: {
                        type: Object,
                        default: null,
                    }
                },
                render: (h, ctx) => {
                    const params = {
                        row: ctx.props.row,
                        index: ctx.props.index,
                    };
                    if (ctx.props.column) {
                        params.column = ctx.props.column;
                    }
                    if (ctx.props.headerRender) {
                        return ctx.props.headerRender(h, params);
                    } else {
                        return h('span', ctx.props.column.label);
                    }
                },
            },
            popover: {
                functional: true,
                props: {
                    content: Function,
                    column: {
                        type: Object,
                        default: null,
                    }
                },
                render: (h, ctx) => {
                    return ctx.props.content(h, ctx.props.column);
                },
            }
        },
        props: {
            col: {
                type: Object,
                default () {
                    return {};
                },
            },
            index: {
                type: Number,
                default () {
                    return -1;
                },
            },
            edit: {
                type: Boolean,
                default() {
                    return true;
                },
            },
        },
        data () {
            return {
                column: {},
            };
        },
        watch: {
            col: {
                handler () {
                    this.init();
                },
                deep: true,
                immediate: true,
            },
        },
        methods: {
            init () {
                this.column = $.extend({}, this.col);
                if (typeof this.column.label === 'number') {
                    this.column = $.extend({}, this.column, {
                        label: String(this.column.label),
                        tooltip: this.edit ? false : this.column.tooltip,
                    });
                }
            },
            getElComp (column, row) {
                let elComp = undefined;
                if (row.elComp && row.elComp[column.prop]) {
                    elComp = row.elComp[column.prop];
                }
                if (!elComp && column.elComp) {
                    elComp = column.elComp;
                }
                if (elComp === 'text') {
                    return elComp;
                }
                if (!this.edit) {
                    if (elComp && typeof elComp.formatter === 'function') {
                        return {
                            elType: 'text',
                            formatter: elComp.formatter,
                        };
                    }
                    return 'text';
                }
                if (elComp) {
                    if (elComp.integer === undefined) {
                        elComp.integer = false;
                    }
                    if (elComp.clearable === undefined) {
                        elComp.clearable = true;
                    }
                    if (elComp.size === undefined) {
                        elComp.size ='mini'// 'small';
                    }
                    if (elComp.integer) {
                        elComp.double = false;
                    }
                    if (elComp.double === undefined) {
                        elComp.double = false;
                    }
                    if (elComp.type==='textarea'&&elComp.autosize === undefined) {
                        elComp.autosize = {maxRows:3};
                    }
                }
                return elComp;
            },
            filter (column, row) {
                return !column.filter || (typeof column.filter === 'function' && column.filter(row));
            },
            filterDisabled(column, row) {
                let elComp = this.getElComp(column, row);
                if (elComp.disabled) {
                    return true;
                }
                if (typeof elComp.filterDisabled === 'function') {
                    return elComp.filterDisabled(row, column)
                }
                return false;
            },
            filterList (column, row, item) {
                let elComp = this.getElComp(column, row);
                return !elComp.filterList || (typeof elComp.filterList === 'function' && elComp.filterList(row, column.prop, item));
            },
        },
    }
</script>

<style scoped>

</style>
